
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
    </style>
    <script src="../dist/vue.js"></script>
</head>
<body>
    <div id="root"></div>
    
</body>
<script>
      

  // ref 处理基础数据类型 【string , number, boolean】
  // reactive 处理非基础数据类型 【对象，数组】
  const app = Vue.createApp({
      template:
      ` 
        <div>
          <child :name='张三' age='15' @change='handleEvent'>
            <span tml='sssss'>三好学生</span>  
          </child>
        
        </div>
      `,
        setup(props, context) {
          const { ref, reactive, readonly, toRefs } = Vue
          function handleEvent(val){
            console.log('val：:',val)
          }
          return { handleEvent }
        }
  });

  app.component('child', {
    props:['name'],
    template:
     `
      <div @click='handleClick'>child</div>
      `,
    setup(props, context) {
      const { h } = Vue
      const {attrs, slots, emit} = context
      console.log('attrs', attrs.age)
      console.log('slots', slots.default())
      console.log('emit', emit)
      function handleClick(){
        emit('change', '123456')
      }
      // return () => h('div', {}, h('div', {name:'ssssss'}, slots.default()))
      return { handleClick }
    }
  })


  const vm = app.mount("#root");
</script>
</html>